<template>
  <div class="BoxDetails">
    <div>
      <div>
        <p>箱子名称</p>
        <el-input placeholder="请输入名称" v-model="from.name" clearable></el-input>
      </div>
      <div>
        <p>类型</p>
        <select v-model="name2">
          <option value="不限">不限</option>
          <option v-for="(item,index) in sel" :key="index+item" :value="item.name">{{item.name}}</option>
        </select>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="success" @click="handleClick">添加</el-button>
    </div>
    <el-tabs @tab-click="tabChange" v-model="activeName">
      <el-tab-pane label="全部" name="4"></el-tab-pane>
      <el-tab-pane label="上架" name="1"></el-tab-pane>
      <el-tab-pane label="下架" name="2"></el-tab-pane>
      <el-table :data="typedata.list" border style="width: 100%">
        <el-table-column prop="id" label="箱子ID" width="160"></el-table-column>
        <el-table-column prop="name" label="箱子名称" width="160"></el-table-column>
        <el-table-column prop="type" label="类型" width="160"></el-table-column>
        <el-table-column prop="price" label="箱子价格" width="160"></el-table-column>
        <el-table-column prop="createdAt" label="关联组名称" width="160"></el-table-column>
        <el-table-column prop="imgFront" label="前景图预览" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.imgFront" style="height:57px;" />
          </template>
        </el-table-column>
        <el-table-column prop="imgBack" label="后景图预览" width="160">
          <template slot-scope="scope">
            <img :src="scope.row.imgBack" />
          </template>
        </el-table-column>
        <el-table-column prop="openTimes" label="开箱总次数" width="160"></el-table-column>
        <el-table-column prop="order" label="排序" width="160"></el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.state==1">
              <el-button type="text" size="small" @click="Dismount(scope.row)">下架</el-button>
              <el-button type="text" size="small" @click="handleClicks(scope)">编辑</el-button>
              <el-button type="text" size="small" @click="Managements(scope.row)">物品管理</el-button>
            </div>
            <div v-if="scope.row.state==2">
              <el-button style="color:#ccc;" type="text" size="small">已下架</el-button>
            </div>
            <div v-if="scope.row.state==0">
              <el-button style="color:red;" type="text" size="small">已删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="currentChange"
        background
        layout="prev, pager, next"
        :total="typedata.pages*10"
      ></el-pagination>
    </el-tabs>
    <div class="Modification" v-if="show">
      <div class="area">
        <p @click="handleClickto">x</p>
        <div class="content">
          <p>类型</p>
          <select v-model="name1">
            <option value="不限">不限</option>
            <option v-for="(item,index) in sel" :key="index+item" :value="item.name">{{item.name}}</option>
          </select>
        </div>
        <div class="content">
          <p>排序</p>
          <input v-model="from1.order" />
        </div>
        <div class="content">
          <p>箱子名称</p>
          <input v-model="from1.name" />
        </div>
        <div class="content">
          <p>箱子价格</p>
          <input v-model="from1.price" />
        </div>
        <div class="content">
          <p>箱子分组</p>
          <!-- <p class="pd">请选择箱子分组</p> -->
          <input :class="num == 0?'color':''" v-model="name3" @keydown.enter="down" placeholder="从箱子关联分组里选取，可以模糊搜索添加" />
          <div class="div" v-if="showw">
            <div v-if="sell.length == 0">暂无数据</div>
            <div v-else>
              <p
                @click="changesell(item.name,item.id)"
                v-for="(item,index) in sell.list"
                :key="item+index"
              >{{item.name}}</p>
              <el-pagination
                @current-change="currentChanges"
                small
                layout="prev, pager, next"
                :total="sell.pages*10"
              ></el-pagination>
            </div>
          </div>
        </div>
        <div class="content">
          <p>开箱总次数</p>
          <i v-if="bool">0</i>
          <i v-else>{{from1.openTimes}}</i>
        </div>
        <div>
          <div class="content">
            <p>前景图</p>
            <el-upload
              class="avatar-uploader"
              v-bind:action="imgUpload"
              :show-file-list="false"
              :on-success="handlePreAvatarSuccess"
              name="file"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div>
          <div class="content">
            <p>后景图</p>
            <el-upload
              class="avatar-uploader"
              v-bind:action="imgUpload"
              :show-file-list="false"
              :on-success="handleNextAvatarSuccess"
              name="file"
            >
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <button v-if="bool" class="ok" @click="handelAdd">新增</button>
        <button v-else class="ok" @click="handelAdds">修改</button>
      </div>
    </div>
    <Management v-if="change" @show="changes" :name="name" :boxGroupId="boxGroupId"></Management>
  </div>
</template>
<script>
import axios from "../../../utils/publicApi";
import BasicsApi from "../../../api/Basicpath/index";
import Management from "../Management/index";
import { Loading } from "element-ui";
export default {
  components: { Management: Management },
  data() {
    return {
      imgUpload: `${BasicsApi}/gamemall/upload/image`,
      imageUrl: "",
      imageUrl2: "",
      change: false,
      bool: false,
      show: false,
      activeName: "4",
      tableData: "",
      typedata: "",
      from: {
        pageSize: 5,
        currentPage: 1,
        name: "",
        type: "",
        state: ""
      },
      showw: false,
      from2: {
        pageSize: 5,
        currentPage: 1,
        name: "",
        type: "",
        state: ""
      },
      from1: {
        type: "",
        order: "",
        name: "",
        price: "",
        openTimes: "/ss/a.jpg",
        imgFront: "/ss/a.jpg",
        imgBack: "",
        boxGroupId: ""
      },
      sel: "",
      name1: "不限",
      name2: "不限",
      boxGroupId: "",
      name: "",
      name3: "",
      sell: "",
      name4: "",
      num:1
    };
  },
  methods: {
    handlePreAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.from1.imgFront = res.data;
    },
    handleNextAvatarSuccess(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.from1.imgBack = res.data;
    },
    changesell(name, id) {
      this.name3 = name;
      this.showw = false;
      this.from1.boxGroupId = id;
    },
    down(e) {
      setTimeout(() => {
        axios
          .getAll("/gamemall/boxGroup/list", {
            name: this.name3,
            pageSize: 1,
            currentPage: 1
          })
          .then(res => {
            if (res.code == 200) {
              this.sell = res.obj;
              if (res.obj.list.length != 0) {
                this.name4 = res.obj.list[0].name;
              }
              this.showw = true;
            }
          });
      });
    },
    Managements(e) {
      this.boxGroupId = e.id;
      this.name = e.name;
      this.change = true;
    },
    Dismount(e) {
      e.state = 2;
      axios
        .postAll("/gamemall/box/update", { id: e.id, state: 2 })
        .then(res => {
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: "下架成功",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: "下架失败",
              type: "error"
            });
          }
        });
    },
    tabChange() {
      var options = false;
      Loading.service(options);
      if (this.name1 == "不限") {
        delete this.from.type;
      }
      if (this.activeName == "4") {
        delete this.from2.state;
        delete this.from.state;
      } else {
        this.from2.state = this.activeName;
      }
      axios.getAll("/gamemall/box/list", this.from2).then(res => {
        if (res.code == 200) {
          this.changeType(res.obj, options);
        }
      });
    },
    handelAdds() {
      this.showw = false;
      this.sel.map(item => {
        if (item.name == this.name1) {
          this.from1.type = item.id;
        }
      });
      axios.postAll("/gamemall/box/update", this.from1).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: "更新成功",
            type: "success"
          });
          axios.getAll("/gamemall/box/list", this.from2).then(res => {
            if (res.code == 200) {
              this.changeType(res.obj);
              this.show = false;
              this.bool = 1;
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "更新失败",
            type: "error"
          });
        }
      });
    },
    currentChanges(e) {
      axios
        .getAll("/gamemall/boxGroup/list", {
          name: this.name3,
          pageSize: 1,
          currentPage: e
        })
        .then(res => {
          if (res.code == 200) {
            this.sell = res.obj;
          }
        });
    },
    changes() {
      this.change = false;
    },
    currentChange(e) {
      var options = false;
      Loading.service(options);
      this.from.currentPage = e;
      this.from2.currentPage = e;
      axios.getAll("/gamemall/box/list", this.from2).then(res => {
        if (res.code == 200) {
          this.changeType(res.obj, options);
        }
      });
    },
    handleClickto() {
      this.show = false;
    },
    handleClicks(e) {
      this.imageUrl2 = e.row.imgBack;
      this.imageUrl = e.row.imgFront;
      this.bool = false;
      this.sel.map(item => {
        if (item.id == e.row.state) {
          this.name1 = item.name;
        }
      });
      this.name3 = "";
      this.name1 = e.row.type;
      this.from1 = JSON.parse(JSON.stringify(e.row));
      this.show = true;
    },
    handleClick() {
      this.name1 = "不限";
      this.imageUrl = "";
      this.imageUrl2 = "";
      (this.from1 = {
        type: "",
        order: "",
        name: "",
        price: "",
        openTimes: "",
        imgFront: "",
        imgBack: "",
        boxGroupId: 0
      }),
        (this.name3 = "");
      this.show = true;
      this.bool = true;
      this.showw = false;
    },
    handelAdd() {
      this.from1.price = this.from1.price * 1;
      if (this.name1 == "不限") {
        delete this.from1.type;
      } else {
        this.sel.map(item => {
          if (item.name == this.name1) {
            this.from1.type = item.id;
          }
        });
      }
      
      axios.postAll("/gamemall/box/insert", this.from1).then(res => {
        if (res.code == 200) {
          this.show = false;
          axios.getAll("/gamemall/box/list", this.from2).then(ress => {
            if (res.code == 200) {
              this.changeType(ress.obj);
              this.$message({
                showClose: true,
                message: "新增成功",
                type: "success"
              });
            }
            
          });
        }
      });
      if(this.from1.boxGroupId == 0){
              this.num = 0
              this.$message({
                  showClose: true,
                  message: "新增失败",
                  type: "error"
                });
               setTimeout(()=>{
                  this.num = 1
               },2000)
            }
    },
    search() {
      var options = false;
      Loading.service(options);
      if (this.activeName == "4") {
        delete this.from.state;
      } else {
        this.from.state = this.activeName;
      }
      if (this.name2 == "不限") {
        delete this.from.type;
      }
      this.sel.map(item => {
        if (this.name2 == item.name) {
          this.from.type = item.id;
        }
      });
      this.from2 = JSON.parse(JSON.stringify(this.from));
      axios.getAll("/gamemall/box/list", this.from).then(res => {
        if (res.code == 200) {
          this.changeType(res.obj, options);
        }
      });
    },
    changeType(parms, options) {
      parms.list.map(item => {
        this.sel.map(item1 => {
          if (item.type == item1.id) {
            item.type = item1.name;
          }
        });
      });
      this.typedata = parms;
      let loadingInstance = Loading.service(options);
      this.$nextTick(() => {
        loadingInstance.close();
      });
    }
  },

  created() {
    axios
      .getAll("/gamemall/box/list", { currentPage: 1, pageSize: 5 })
      .then(res => {
        if (res.code == 200) {
          axios.getAll("/gamemall/droplist/type").then(ress => {
            if (res.code == 200) {
              this.sel = ress.obj;
              this.changeType(res.obj);
            }
          });
        }
      });
  }
};
</script>
<style lang="less" >
@import "../../../style/mixin.less";
.BoxDetails {
  .pd{
        width: 200px!important;
        position: absolute;
        right: 22px;
        top: 42%;
        color: red;
  }
  .el-input {
    display: inline-block;
    width: 200px;
  }
  img {
    height: 57px;
    width: 100px;
  }
  .color{
    border-color: red;
  }
  .div {
    width: 350px;
    background: white;
    position: absolute;
    left: 128px;
    top: 251px;
    z-index: 9999;
    div {
      text-align: center;
      > p:hover {
        background: #ccc;
      }
    }
    p {
      width: auto !important;
      text-align: left !important;
    }
  }
  .box {
    width: 100px;
    height: 100px;
  }
  text-align: left;
  input {
    border: 1px solid #ccc;
    height: 30px;
  }
  > div:nth-of-type(1) {
    margin: 50px 0;
    .el-button {
      margin: 0 20px;
    }
    div {
      display: inline-block;
      margin-right: 100px;
    }
    select {
      .w(150);
    }
    p {
      display: inline-block;
      margin-right: 50px;
    }
  }
  .el-pagination {
    text-align: center;
  }
  .Modification {
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    .area {
      > p {
        color: black;
        position: absolute;
        right: 12px;
        top: 10px;
        font-size: 20px;
        cursor: pointer;
      }
      position: absolute;
      background: white;
      margin-top: 30px;
      padding: 20px;
      left: 50%;
      margin-left: -230px;
      border: 1px solid gainsboro;
      padding-top: 0;
      .content {
        display: flex;
        margin-top: 20px;
        padding-right: 15px;
        p {
          font-size: 15px;
          line-height: 30px;
          width: 108px;
          text-align: right;
          padding-right: 30px;
        }
        select,
        input {
          width: 350px;
          height: 30px;
          margin: auto 0;
          padding-left: 5px;
        }
        i {
          font-style: normal;
          margin: auto 0;
        }
        button {
          width: 100px;
          height: 20px;
          margin: auto 0;
          font-size: 12px;
          border: 1px solid black;
          border-radius: 5px;
        }
      }
      .avatar-uploader {
        text-align: left;
        margin-left: 30px;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
      .avatar {
        width: 100px;
        height: 100px;
        display: block;
      }
    }
    .ok {
      margin: 30px 0 0 106px;
      width: 60px;
      height: 26px;
      background: #12afef;
      border: 0;
      border-radius: 5px;
      color: white;
    }
  }
}
</style>